<template>
  <div class="job-match-container">
    <h3>岗位匹配分析</h3>
    <p>请输入您的技能和经验，获取最匹配的岗位建议</p>

    <div class="input-area">
      <textarea
        v-model="userInfo"
        placeholder="请输入您的技能、经验和期望..."
        rows="6"
      ></textarea>
      <button
        @click="getJobMatch"
        :disabled="!userInfo.trim()"
      >
        获取匹配建议
      </button>
    </div>

    <!-- 加载状态 -->
    <div class="loading" v-if="isLoading">
      正在分析您的信息，请稍候...
    </div>

    <!-- 匹配结果 -->
    <div class="match-result" v-if="matchResult">
      <h4>最匹配的岗位：</h4>
      <ul class="job-list">
        <li v-for="(job, index) in matchResult.jobs" :key="index">
          <div class="job-title">{{ job.title }}</div>
          <div class="match-score">匹配度：{{ job.matchScore }}%</div>
          <div class="job-description">{{ job.description }}</div>
        </li>
      </ul>

      <div class="improvement-tips">
        <h4>提升匹配度建议：</h4>
        <p>{{ matchResult.tips }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../services/api'

export default {
  name: 'JobMatch',
  data() {
    return {
      userInfo: '', // 用户输入的个人信息
      isLoading: false, // 加载状态
      matchResult: null // 岗位匹配结果
    }
  },
  methods: {
    // 获取岗位匹配结果
    async getJobMatch() {
      if (!this.userInfo.trim()) return

      try {
        this.isLoading = true
        this.matchResult = null

        // 调用API获取岗位匹配结果
        const response = await api.jobMatch.getMatch({
          info: this.userInfo
        })

        if (response.data.success) {
          this.matchResult = response.data.result
        }
      } catch (error) {
        console.error('获取岗位匹配失败:', error)
        alert('获取岗位匹配失败，请重试')
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style>
.job-match-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.input-area {
  margin-bottom: 20px;
}

.input-area textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.input-area button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-area button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.match-result {
  margin-top: 20px;
}

.job-list {
  list-style: none;
  padding: 0;
}

.job-list li {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.job-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
}

.match-score {
  color: #42b983;
  margin: 5px 0;
}

.job-description {
  color: #666;
  font-size: 0.95em;
}

.improvement-tips {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>